<template>
  <div id="app">
    <van-nav-bar
      title="零件管理"
      left-text="退出"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 搜索栏 -->
    <van-row>
      <van-col span="14">
        <form action="/">
          <van-search
            v-model="queryInfo.query"
            show-action
            placeholder="请输入零件名称"
            :clearable="true"
            @clear="Onclear"
            @search="getCompList()"
          >
            <template #action></template>
          </van-search>
        </form>
      </van-col>
      <!-- 搜索按钮和添加按钮 -->
      <van-col span="3" offset="0">
        <van-button class="searchBtn" @click="getCompList()" size="small" round type="info">查询</van-button>
      </van-col>
      <van-col span="2" offset="2">
        <van-button class="addBtn" @click="openAdd()" icon="plus" type="primary" size="small" round />
      </van-col>
    </van-row>
    <!-- 内容主体 -->
    <van-cell-group v-for="item in complist" :key="item.cid" :border="true">
      <van-cell
        :title="item.cname"
        :label="'cid:'+item.cid+'---price:'+item.price+'---'+item.sname"
      >
        <van-button @click="openUpdate(item.cid)" size="small" plain type="primary">修改</van-button>
        <van-button @click="remove(item.cid)" size="small" plain type="primary">删除</van-button>
      </van-cell>
      <div class="van-hairline--top"></div>
    </van-cell-group>

 <!-- 添加 -->
    <van-overlay :show="addDialogVisible">
      <van-form class="addForm">
        <van-field
          v-model="addForm.cname"
          name="零件名称"
          label="零件名称"
          placeholder="零件名称"
          :rules="[{ required: true, message: '请填写零件名称' }]"
        />
        <van-field
          v-model="addForm.price"
          name="零件价格"
          label="零件价格"
          placeholder="零件价格"
          :rules="[{ required: true, message: '请填写零件价格' }]"
        />
        <van-cell title="供应商">
          <van-dropdown-menu title-class="dropDownMenu">
            <van-dropdown-item
              class="dropDownMenuItem"
              v-model="addForm.sid"
              :options="supplierlist"
            />
          </van-dropdown-menu>
        </van-cell>
        <div style="margin: 16px;">
          <van-button plain type="info" @click="closeAdd()">取消</van-button>
          <van-button plain type="primary" @click="AddComp()">提交</van-button>
        </div>
      </van-form>
    </van-overlay>
    <!-- 修改 -->
    <van-overlay :show="editDialogVisible">
      <van-form class="editForm">
        <van-field
          readonly
          v-model="editForm.cid"
          name="零件id"
          label="零件id"
          placeholder="零件id"

        />
        <van-field
          v-model="editForm.cname"
          name="零件名称"
          label="零件名称"
          placeholder="零件名称"
          :rules="[{ required: true, message: '请填写零件名称' }]"
        />
        <van-field
          v-model="editForm.price"
          name="零件价格"
          label="零件价格"
          placeholder="零件价格"
          :rules="[{ required: true, message: '请填写零件价格' }]"
        />

        <van-cell title="供应商">
          <van-dropdown-menu title-class="dropDownMenu">
            <van-dropdown-item
              class="dropDownMenuItem"
              v-model="editForm.sid"
              :options="supplierlist"
            />
          </van-dropdown-menu>
        </van-cell>
        <div style="margin: 16px;">
          <van-button plain type="info" @click="closeEdit()">取消</van-button>
          <van-button plain type="primary" @click="UpdateComp()">提交</van-button>
        </div>
      </van-form>
    </van-overlay>
    <div style="height: 3rem;"></div>
    <!-- tabBar -->
    <van-tabbar v-model="tabarActive">
      <van-tabbar-item icon="setting-o" @click="redirects('/comps')">零件列表</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="redirects('/supplier')">供应商</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="redirects('/contacts')">联系人</van-tabbar-item>
      <van-tabbar-item icon="cart-o" @click="redirects('/order')">订购管理</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabarActive: 0,
      // 功能区数据
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 100
      },
      // 零件列表
      complist: [],
      // 供应商列表
      supplierlist: [
        { text: '供应商A', value: 30001 },
        { text: '供应商B', value: 30002 },
        { text: '供应商C', value: 30003 },
        { text: '供应商D', value: 30004 }
      ],
      total: 0,
      // 控制添加零件对话框的显示与隐藏
      addDialogVisible: false,
      // 添加零件的表单数据
      addForm: {
        cname: '',
        sid: '',
        sname: '',
        price: ''
      },
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的用户信息对象
      editForm: {},
      
    }
  },
  created() {
    getCompList()
  },
  methods: {
    // 删除操作
    async removeComp(cid) {
      const { data: res } = await this.$http.post('comp/deleteComp',{'cid':cid})
      if (res.meta.status == 200) {      
        // 提示修改成功
        this.$toast.success('删除零件信息成功！')
        // 刷新数据列表
        this.getCompList()
      }else {
        return this.$toast.fail('删除零件信息失败！')
      }
    },
    remove(cid){
        this.$dialog.confirm({
        title: '提示',
        message: '是否确认删除零件',
        })
        .then(() => {
        // on confirm
        this.removeComp(cid)

        })
        .catch(() => {
        // on cancel
        this.$toast.success('已取消')
        });
    },

    // 添加
    async AddComp() {
       // 关闭对话框
      this.editDialogVisible = false
      const { data: res } = await this.$http.post('comp/addComp', this.addForm)
      if (res.meta.status !== 200) {
        return this.$toast.fail('添加零件信息失败！')
      }
      // 提示修改成功
      this.$toast.success('添加零件信息成功！')
      this.addDialogVisible = false
      // 刷新数据列表
      this.getCompList()
      this.addForm=''
    },
    async openAdd() {
      this.addDialogVisible = true
    },
    closeAdd() {
      this.addDialogVisible = false
      this.$toast.success('已取消')
    },





    closeEdit() {
      this.editDialogVisible = false
      this.$toast.success('已取消')
    },
    async UpdateComp() {
       // 关闭对话框
      this.editDialogVisible = false
      const { data: res } = await this.$http.post('comp/updateComp',this.editForm)
      if (res.meta.status !== 200) {
        return this.$toast.fail('更新零件信息失败！')
      }
      // 刷新数据列表
      this.getCompList()
      // 提示修改成功
      this.$toast.success('更新零件信息成功！')
    },
    async openUpdate(cid) {
      const { data: res } = await this.$http.get('comp/getComp', {
        params: { cid: cid }
      })
      if (res.meta.status !== 200) {
        return this.$toast.error('查询零件信息失败！')
      }

      this.editForm = res.data.comp
      //this.getSuplierList()
      this.editDialogVisible = true
    },
    Onclear() {
      this.queryInfo.query = ''
      getCompList()
    },
    // 获取供应商列表
    async getSuplierList() {
      const { data: res } = await this.$http.get('comp/listSuppliers', {})
      if (res.meta.status == 200) {
        this.supplierlist = res.data.suppliers
        //return this.$message.success('获取供应商列表！')
      } else {
        return this.$toast.fail('获取供应商列表失败！')
      }
      console.log(res)
    },
    // 获取零件列表
    async getCompList() {
      //const { data: res } = await this.$http.get('comp/listComp', {
      const { data: res } = await this.$http.get('comp/listComp', {
        params: this.queryInfo
      })
      if (res.meta.status == 200) {
        this.complist = res.data.comps
        this.total = res.data.total
        //return this.$message.success('获取零件列表！')
      } else {
        return this.$toast.fail('获取零件列表失败！')
      }
      console.log(res)
    },

    onSearch(val) {
      Toast(val)
    },
    onCancel() {
      Toast('取消')
    },
    onClickLeft() {
      this.logout()
    },
    onClickRight() {
      this.$router.push('/home')
    },
    //跳转页面
    redirects(url) {
      this.$router.push(url)
    },
    logout() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.searchBtn {
  position: relative;
  padding: 0rem;
  top: 0.8rem;
}
.addBtn {
  position: relative;
  padding: 0rem;
  top: 0.8rem;
}
.editForm {
  position: relative;
  top: 10%;
}
.addForm {
  position: relative;
  top: 10%;
}
.dropDownMenu {
  position: relative;
}
.dropDownMenuItem {
  position: relative;

}
</style>
